<template>
    <admin-main :breadcrumbs="breadcrumbs">
        <fold-panel title="Web Setting" class="panel-default" id="web_table" v-show="td.length != 0">
            <data-table class="table-bordered table-hover" :tableHead="th" :tableData="td"
                        :edit="edit" :insert="insert"></data-table>
        </fold-panel>
        <loading :isLoading="td.length === 0"></loading>
    </admin-main>
</template>

<script>
    /* eslint-disable no-undef */

    import AdminMain from './AdminMain.vue';
    import FoldPanel from 'vue-fiu-ui/src/main/js/components/panel/FoldPanel.vue';
    import DataTable from 'vue-fiu-ui/src/main/js/components/table/DataTable.vue';
    import Loading from '../layout/Loading.vue';

    export default {
        components: {
            Loading,
            DataTable,
            FoldPanel,
            AdminMain
        },
        data () {
            return {
                breadcrumbs: {
                    title: '网站设置',
                    data: [
                        {to: {name: 'Home'}, icon: 'fa-home', cut: true, disabled: false, text: 'Home'},
                        {to: '#', cut: false, disabled: true, text: '网站设置'}
                    ]
                },
                td: [],
                th: [
                    {text: 'Key'},
                    {text: 'Value'},
                    {text: '说明'}
                ],
                title: '添加一条设置'
            };
        },
        methods: {
            initTableData () {
                axios.get('/setting/list').then((res) => {
                    if (!res.data.success) {
                        this.$notify.open({
                            fixed: 'top-mid',
                            type: 'danger',
                            content: '无法获取数据'
                        });
                        return;
                    }
                    let d = res.data.data;
                    let list = [];
                    for (let k in d) {
                        list.push({
                            id: d[k].id,
                            data: [d[k].item, d[k].val, d[k].description]
                        });
                    }
                    this.td = list;
                });
            },
            edit (id) {
                axios.get('/setting/info/' + id).then((res) => {
                    if (res.data.success === true) {
                        let d = res.data.data;
                        this.initModal('/setting/update', d.id, d.item, d.val, d.description);
                    } else {
                        this.$notify.open({type: 'danger', content: JSON.stringify(res.data.data)});
                    }
                });
            },
            insert () {
                this.initModal('/setting/insert', 0, '', '', '');
            },
            initModal (url, id, key, value, description) {
                this.$modal.open({
                    title: '添加设置',
                    content: `<div>
<input type="hidden" value="${id}" id="id">
<div class="form-group">
    <label for="name">Key:</label>
    <input type="text" class="form-control" id="key" required value="${key}">
</div>
<div class="form-group">
    <label for="name">value:</label>
    <input type="text" class="form-control" id="value" required value="${value}">
</div>
<div class="form-group">
    <label for="name">Description:</label>
    <input type="text" class="form-control" id="description" required value="${description}">
</div>
</div>`
                }, (el, m) => {
                    axios.post(url, {
                        id: $('#id').val(),
                        item: $('#key').val(),
                        val: $('#value').val(),
                        description: $('#description').val()
                    }).then((res) => {
                        if (res.data.success === false) {
                            this.$notify.open({type: 'danger', content: JSON.stringify(res.data.data)});
                        } else {
                            this.$notify.open({type: 'success', content: res.data.data});
                        }
                    });
                    m.modal('hide');
                    this.initTableData();
                });
            }
        },
        mounted () {
            this.initTableData();
            document.title = 'Web Setting';
        }
    };
</script>

<style>

</style>
